<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Vue学习基础</title>
	<style type="text/css">
		body {
			line-height: 1.5;
		}

		p {
			color: red;
		}
	</style>
</head>

<body>
	<h4>一、vue基础</h4>
	<p>
		1.直接CDN引入<br>
		在script src引入
		（1）开发环境版本，包含了有帮助的命令行警告（非压缩版）<br>
		https://cdn.jsdelivr.net/npm/vue/dist/vue.js<br>
		（2）生产环境版本，优化了尺寸和速度（min版）<br>
		https://cdn.jsdelivr.net/npm/vue"<br>
		2.下载版<br>
		开发版：vuejs.org/js/vue.js<br>
		生产版：vuejs.org/js/vue.min.js<br>
		3.NPM安装<br>
		通过webpack和CLI的使用<br>
	</p>
	<p>
		4.el挂载点
		（1）用来设置vue实例挂载（管理）的元素
		（2）el选项 命中的元素 及其他内部的后代元素
		（3）可以使用其他选择器，但建议使用id选择器
		（4）可以使用其他双标签，不能使用HTML和body
	</p>
	<p>
		5.data数据对象
		vue中用到的数据定义在data中
		data中可以写复杂类型的数据
		渲染复杂类型数据时，遵守js语法即可 {{对象.属性}}，{{数组[index]}}
	</p>
	<h4>二、本地应用</h4>
	<p>
		1.v-text<br>
		作用：设置标签的内容(textContent)<br>
		默认写法会替换全部内容，使用 差值表达式{{}}可以替换指定内容<br>
		内部支持写表达式<br>
	</p>
	<p>
		2.v-html<br>
		作用：设置元素的innerHTML<br>
		内容中有html结构会被解析为标签<br>
		v-text指令无论内容是什么，只会解析为文本<br>
		解析文本使用v-text，解析html结构使用v-html<br>
	</p>
	<p>
		3.v-on<br>
		作用：为元素绑定事件<br>
		事件名不需要写on<br>
		指令可以简写为@<br>
		绑定的方法定义在methods属性汇总<br>
		方法内部通过this关键字可以访问定义在data中的数据<br>
	</p>
	<p>
		4.v-show<br>
		v-show指令作用：根据真假（true/false）切换元素的显示状态<br>
		原理是修改元素的display，实现显示隐藏<br>
		指令后面内容，最终会解析为布尔值<br>
		值为true元素显示，值为false元素隐藏<br>
		数据改变之后，对应的显示状态会同步更新<br>
	</p>
	<p>
		5.v-if指令（操作DOM元素）<br>
		v-if指令作用：根据表达式的真假切换元素的显示状态<br>
		本质是通过DOM元素来切换显示状态<br>
		表达式的值为true，元素存在于DOM树中，为false，从DOM树中移除<br>
		频繁切换使用v-show，反之使用v-if，前者的切换消耗小<br>
	</p>
	<p>
		6.v-bind<br>
		v-bind指令作用：为元素绑定属性<br>
		完整写法：v-bind:属性名<br>
		简写直接省略v-bind，只保留 :属性名<br>
		需要动态的增删class类名建议使用对象格式
	</p>
	<p>
		7.v-for<br>
		v-for指令作用：根据数据生成列表结构<br>
		数组经常和v-for结合使用<br>
		语法：(item,index) in 数据<br>
		item和index可以结合其他指令一起使用<br>
		数据长度的更新同步到页面上，是响应式的<br>
		额外学习：<br>
		.push():从后面增加<br>
		.shift()：左侧<br>
	</p>
	<p>
		8.v-on补充<br>
		事件绑定的方法写成函数调用的形式，可以传入自定义参数<br>
		定义方法时需要定义形参来接收传入的实参<br>
		事件后面跟上 .修饰符 可以对事件进行限制，如： .enter：可以限制触发按键是回车<br>
		事件修饰符有很多种：参考https://cn.vuejs.org/v2/api/#v-on<br>
	</p>
	<p>
		9.v-model<br>
		v-model指令作用：便捷的设置和获取表单元素的值<br>
		绑定的数据会和表单元素值相关联<br>
		绑定的数据←→表单元素的值，双向数据绑定，同步更新<br>
	</p>
	<h4>三、网络应用</h4>
	<p>
		1.axios 功能欠打的网络请求库<br>
		地址：script src="https://unpkg.com/axios/dist/axios.min.js"<br>
		（1）get请求：<br>
		axios.get("地址?查询字符串").then(function(response){}，function(err){})<br>
		function(response){}：在请求响应完成后触发，形参response：服务器响应的内容<br>
		function(err){}：在请求失败时候触发，形参err：错误的信息<br>
		查询字符串：url地址用?隔开，如果需要传递参数时，格式：key=value&key2=value2&...<br>
		（2）post请求：<br>
		axios.post("地址",参数对象).then(function(response){}，function(err){})<br>
		参数对象：url地址用,隔开，格式是一个对象：{key:value,key2:value2,...}<br>
		（3）共同点：<br>
		key：接口文档提供<br>
		value是具体传输的数据<br>
		（4）axios必须先导入才可以使用<br>
		（5）使用get或post方法即可发生对应的请求<br>
		（6）then方法中回调函数会在请求成功或失败时触发<br>
		（7）通过回调函数的形参可以获取响应式内容，或错误信息<br>
	</p>
	<p>
		2.axios+Vue
		axios回调函数中this已经改变，无法访问到data中数据<br>
		把this保存起来，回调函数中直接使用保存的this即可<br>
		和本地应用的最大区别就是改变了数据来源，大部分为网络获取的<br>
	</p>
</body>

</html>